<template>
	<div style="position: relative;">
		<div style="width: 100%;height: 87vh;" id="amap" class="mymap">
		</div>
		<div>
			<div :style="drawBtnStyle" @click="changeBtn">
				<i :class="drawBtnIcon" style="color: #fff;"></i>
			</div>
			<el-drawer v-if="drawer" :visible.sync="drawer" :direction="direction" :before-close="handleClose"
				:modal="false" :modal-append-to-body="false" :append-to-body="false" :style="drawStyle"
				:wrapperClosable="false" class="my-draw" :show-close="false" :withHeader="false">
				<left-container @on-selected="selectNode" @map-data="drawMapNode"></left-container>
			</el-drawer>

		</div>

		<div v-if="videoFrame.show"
			:style="{position: 'absolute',top: '0px',left: videoFrame.left+'vw',width: videoFrame.width+'vw',height: videoFrame.height+'vh','z-index':111,background:'#fff'}">
			<div style="width: 100%;display: flex;justify-content: end;">
				<i class="el-icon-close" style="margin-right: 10px;" @click="videoFrame.show=false" /><i
					class="el-icon-full-screen" />
			</div>
			<iframe :src="playUrl" width="99.8%" height="98%" style="background: #fff;"></iframe>
		</div>


		<div>
			<div :style="bottomdraw.btn.style" @click="changeBottom">
				<i :class="bottomdraw.btn.icon" style="color: #fff;"></i>
			</div>
			<el-drawer v-if="bottomdraw.show" :visible.sync="bottomdraw.show" :direction="bottomdraw.direction"
				:modal="false" :modal-append-to-body="false" :append-to-body="false" :style="bottomdraw.style"
				:wrapperClosable="false" class="bottom-draw" :show-close="false" :withHeader="false">
				<div style="width: 100%;display: flex;justify-content: end;">
					<i class="el-icon-full-screen" @click="changeBottomFullScreen"></i>
				</div>

				<bottom-container :nodes.sync="selectedNodes" :bottomHeight.sync="bottomdraw.style.height" :cljkData.sync="pointers"></bottom-container>


			</el-drawer>

		</div>




	</div>
</template>

<script>
	import { ZXWS_WEB_SERVER_IP, ZXWS_WEB_SERVER_PORT, ZXWS_VIDEO_SERVER_PORT } from '@/config/env';
	import AMapLoader from '@amap/amap-jsapi-loader';
	import leftContent from './left/left-container.vue'
	import bottomContent from './left/bottom-container.vue'
	import {
		mapState,
		mapMutations
	} from "vuex";

	import {
		getCarPageList
	} from '@/api/cljk.js';

	import mapCarRun from "@/assets/images/cljk/map-car-run.png";
	import mapCarStop from "@/assets/images/cljk/map-car-stop.png";
	import mapCarOffline from "@/assets/images/cljk/map-car-offline.png";
	import mapCarNever from "@/assets/images/cljk/map-car-never.png";
	import mapCarXh from "@/assets/images/cljk/map-car-xh.png";

	export default {

		components: {

			'left-container': leftContent,
			'bottom-container': bottomContent,

		},
		computed: {
			...mapState("GlobalStore", [
				"isCollapseLeftMenu",
				"globalLeftMenuTree",
			]),
		},
		watch: {
			isCollapseLeftMenu: function(val) {
				if (val) {
					if (this.drawer) {
						this.bottomdraw.style.width = '65vw'
					} else {
						this.bottomdraw.style.width = '85vw'
					}

				} else {
					if (this.drawer) {
						this.bottomdraw.style.width = '76vw'
					} else {
						this.bottomdraw.style.width = '96vw'
					}
				}
			}
		},
		data() {
			return {
				zxws_web_server_ip:ZXWS_WEB_SERVER_IP,
				zxws_web_server_port:ZXWS_WEB_SERVER_PORT,
				zxws_video_server_port:ZXWS_VIDEO_SERVER_PORT,
				drawer: true,
				direction: 'ltr',
				drawBtnWidth: 20,
				drawStyle: {
					position: 'absolute',
					width: '20vw',
					'height': '86vh',
				},
				drawBtnIcon: 'el-icon-d-arrow-left',
				drawBtnStyle: {
					width: '30px',
					height: '30px',
					position: 'absolute',
					top: '42px',
					left: '20vw',
					'z-index': 111,
					'text-align': 'center',
					background: 'rgba(0,0,0,0.3)',
					'border-radius': '50%',
					'align-items': 'center',
					display: 'flex',
					'justify-content': 'center'
				},

				bottomdraw: {
					show: true,
					direction: 'btt',
					style: {
						position: 'absolute',
						width: '65vw',
						height: '22vh',
						left: '21vw'
					},
					fullBtn: {
						num: 0
					},
					btn: {
						icon: 'el-icon-bottom',
						style: {
							width: '30px',
							height: '30px',
							position: 'absolute',
							bottom: '23vh',
							left: '60vw',
							'z-index': 111,
							'text-align': 'center',
							background: 'rgba(0,0,0,0.3)',
							'border-radius': '50%',
							'align-items': 'center',
							display: 'flex',
							'justify-content': 'center'
						}
					}
				},
				videoFrame: {
					show: false,
					left: 21,
					width: 40,
					height: 66


				},

				map: null,
				cluster: null,
				playUrl: '',
				selectedNodes: null,
				infoWindow: null,
				pointers:[]
			};
		},

		methods: {
			...mapMutations("GlobalStore", ["UPDATE_STATE"]),
			initMap() {
				AMapLoader.load({
					key: "64a2876c96c2199296e28d0bdd64d43a", //此处填入我们注册账号后获取的Key
					version: "2.0", //指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
					plugins: ['AMap.ToolBar', // 缩放按钮
						'AMap.Scale', // 比例尺
						'AMap.DragRoute', // 拖拽点图
						'AMap.Driving', // 导航
						'AMap.MarkerCluster', // 点聚合
					], //需要使用的的插件列表，如比例尺'AMap.Scale'等
				}).then((AMap) => {
					this.map = new AMap.Map("amap", { //设置地图容器id
						viewMode: "3D", //是否为3D地图模式
						zoom: 5, //初始化地图级别
						center: [105.602725, 37.076636], //初始化地图中心点位置
					});
					this.map.addControl(new AMap.ToolBar())
					this.map.addControl(new AMap.Scale())


				}).catch(e => {
					console.log(e);
				})
			},
			drawMapNode(p) {
				for (var i = 0; i < this.pointers.length; i++) {
					var item=this.pointers[i]
					if(item.vehId===p.vehId){
						
						this.pointers[i]={
							weight:1,
							lnglat: [p.lng, p.lat],
							...p
						}
						
						
					}
				}
				
				if(this.cluster){
					this.cluster.setData(this.pointers)
				}
			},
			_renderMarker(context) {
				let item = context.data[0]
				let icon = mapCarNever
				if (item.status === 1) {
					icon = mapCarRun
				} else if (item.status === 2) {
					icon = mapCarStop
				} else if (item.status === 3) {
					icon = mapCarXh
				} else if (item.status === 4) {
					icon = mapCarOffline
				} else if (item.status === 0) {
					icon = mapCarNever
				}
				context.marker.setContent(
					`<div style="height: 30px; width: 30px;"><img style="width: 100%; height: 100%" src="${icon}"></img></div>`
				)

				//此处为设置标记携带的数据，点击事件会使用
				context.marker.setExtData({
					...item
				});

				//此处为添加单个标记点击事件
				context.marker.on('click', ev => {
					//当前标记居中
					this.map.setZoomAndCenter(16, ev.target.getPosition());
					//获取标记携带的数据
					const extData = ev.target.getExtData();
					const id = extData.id;

					let status = ''

					if (extData.status === 1) {
						status = '行驶'
					}
					if (extData.status === 2) {
						status = '停车'
					}

					if (extData.status === 3) {
						status = '熄火'
					}

					if (extData.status === 4) {
						status = '离线'
					}

					if (extData.status === 0) {
						status = '从未上线'
					}

					var driverName = ''
					if (extData.driverName) {
						driverName = extData.driverName;
					}

					var wifi = ''

					if (parseInt(extData.signalNum) > 1) {
						wifi = '强'
					} else {
						wifi = '弱'
					}

					var dw = ''

					if (parseInt(extData.satelliteNum) > 1) {
						dw = '强'
					} else {
						dw = '弱'
					}


					var content = '<div style="width:410px"> ' +

						'<div style="display:flex;background:#00A0EB">' +
						'<span style="color:#fff">' + extData.plateNo + '(ACC ' + extData.acc + ' 速度 ' + extData
						.speed + 'km/h)</span>' +
						'</div>' +
						'<div style="padding:8px">' +
						'<div>驾驶员：' + driverName + '</div>' +
						'<div style="margin-top:5px">车辆状态：' + status + '</div>' +
						'<div style="margin-top:5px">方向：' + extData.direction + '</div>' +
						'<div style="margin-top:5px">通信信号：' + wifi + '</div>' +
						'<div style="margin-top:5px">定位信号：' + dw + '</div>' +
						'<div style="margin-top:5px">油量：' + extData.oil + '&nbsp;L</div>' +
						'<div style="display:flex;width: 100%;justify-content: space-between;margin-top:5px">' +
						'<span>时间：' + extData.gpsTime + '</span><span>终端标识：' + extData.terminalId + '</span>' +
						'</div>' +
						'<div style="display:flex;width: 100%;justify-content: space-between;margin-top:5px">' +
						'<span>总里程：' + extData.mileTotal.toFixed(2) + '&nbsp;km</span><span>今日里程：' + extData
						.mileToday.toFixed(2) + '&nbsp;km</span>' +
						'</div>' +
						'<div style="margin-top:5px">组织机构：' + extData.companyName + '</div>' +
						'<div style="margin-top:5px">地址：' + extData.lnglat + '</div>' +
						'<div style="margin-top:5px">报警信息：' + extData.alarmType + '</div>' +
						'</div>' +
						'</div>';
					this.infoWindow = new AMap.InfoWindow({
						content: content //使用默认信息窗体框样式，显示信息内容

					});
					//将marker放到指定坐标
					this.infoWindow.open(this.map, extData.lnglat);
				});

			},
			selectNode(param) {

				if (param.type === "loadTable") {
					if (param.data && param.data.length > 0) {
						this.selectedNodes = param.data

						var ids = this.selectedNodes.map((e) => e.id)

						getCarPageList({
							vehIds: ids,
							deptIds: []
						}).then(res => {
							if (res.code === 200) {
								
								this.pointers = []
								this.map.clearMap();
								res.data.forEach(item => {
									this.pointers.push({
										weight: 1,
										lnglat: [item.maplng, item.maplat],
										...item
									})
								})




								if (this.cluster) { // 1. 如果存在 cluster 说明已经初始化过了，直接使用，变更它的点的内容就可以了。
									this.cluster.setData(this.pointers)
								} else { // 2. 如果没有 cluster 就进行初始化。
									this.cluster = new AMap.MarkerCluster(
										this.map, // 地图实例
										this.pointers, // 海量点数据，数据中需包含经纬度信息字段 lnglat
										{
											gridSize: 30,
											renderMarker: this._renderMarker, // 自定义非聚合点样式
										}
									)
								}



							}
						})


					}

				}

				if (param.type === 'sssp') {
					if (param.data) {
						this.videoFrame.show = true
						this.playUrl = 'http://'+this.zxws_web_server_ip+':'+this.zxws_video_server_port+'/test/mpegts?tno=' + param.data.simNo
					}
				}

			},

			changeBottomFullScreen() {
				this.bottomdraw.fullBtn.num++;
				if (this.bottomdraw.fullBtn.num % 2 !== 0) {
					this.bottomdraw.style.height = '83vh'
					this.bottomdraw.btn.style.bottom = '84vh'
				} else {
					this.bottomdraw.style.height = '22vh'
					this.bottomdraw.btn.style.bottom = '23vh'
				}

			},
			changeBtn() {

				if (this.drawer) {
					this.drawBtnIcon = 'el-icon-d-arrow-right'
					this.drawBtnStyle.left = '0vw'
					this.bottomdraw.style.left = '1vw'
					if (this.isCollapseLeftMenu) {
						this.bottomdraw.style.width = '85vw'
					} else {
						this.bottomdraw.style.width = '96vw'
					}

					this.videoFrame.left = 1
					this.videoFrame.width = 45
					this.drawer = false

				} else {
					this.drawBtnIcon = 'el-icon-d-arrow-left'
					this.drawBtnStyle.left = '20vw'
					this.bottomdraw.style.left = '21vw'
					if (this.isCollapseLeftMenu) {
						this.bottomdraw.style.width = '65vw'
					} else {
						this.bottomdraw.style.width = '76vw'
					}
					this.videoFrame.left = 21
					this.videoFrame.width = 40
					this.drawer = true
				}
			},

			changeBottom() {
				this.bottomdraw.fullBtn.num = 0
				if (this.bottomdraw.show) {
					this.bottomdraw.btn.icon = 'el-icon-top'
					this.bottomdraw.btn.style.bottom = '1vh'
					this.bottomdraw.show = false
					this.videoFrame.height = 86
				} else {
					this.bottomdraw.btn.style.bottom = '21vh'
					this.bottomdraw.btn.icon = 'el-icon-bottom'
					this.bottomdraw.style.height = '20vh'
					this.videoFrame.height = 66
					this.bottomdraw.show = true
				}
			}


		},
		mounted() {
			this.initMap()
			var val = this.isCollapseLeftMenu
			if (val) {
				if (this.drawer) {
					this.bottomdraw.style.width = '65vw'
				} else {
					this.bottomdraw.style.width = '85vw'
				}

			} else {
				if (this.drawer) {
					this.bottomdraw.style.width = '76vw'
				} else {
					this.bottomdraw.style.width = '96vw'
				}
			}
		}


	}
</script>

<style lang="scss">
	.my-draw {

		.ltr {
			width: 99.9% !important;
		}


	}

	.mymap {
		.amap-info-content {
			padding: 0;
		}

		.amap-info-close {
			color: #fff;
			font: 700 20px/14px Tahoma, Verdana, sans-serif
		}
	}

	.bottom-draw {
		position: absolute;
		z-index: 2002;
		bottom: 1vh;
		top: unset;

		.btt {
			width: 99.9% !important;
			height: 99.9% !important;
		}
	}
</style>